<template>
  <view class="container">
    <contract-service />
    <!-- <movable-area class="movable-area">
	        <movable-view class="movable-view" :x="x" :y="y" direction="all">
	  		<button class="newProblem"  open-type="im"  :data-im-id="imId"  @im="imCallback"  @error="onimError">
	            <text>客服</text>
	          </button>
	        </movable-view>
	  </movable-area> -->
    <!-- <movable-area class="movable-area1">
	        <movable-view class="movable-view" :x="x" :y="y" direction="all">
	  		<button class="newProblem"  @click="phoneclick">
	            <text>热线客服</text>
	          </button>
	        </movable-view>
	  </movable-area> -->
    <!-- 店铺页面组件 -->
    <Page :items="items" />
    <!-- <view  class="my-logout1">
	  <view class="logout-btn" @click="onTargetDetail()">
	    <text>运营方:鸿阿姨家政【服务资质】</text>
	  </view>
	</view> -->
  </view>
</template>

<script>
import { setCartTabBadge } from "@/core/app";
import * as Api from "@/api/page";
import Page from "@/components/page";

const App = getApp();

export default {
  components: {
    Page,
  },
  data() {
    return {
      // 页面参数
      options: {},
      // 页面属性
      page: {},
      // 页面元素
      items: [],
      imId: "hjm616161",
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 当前页面参数
    this.options = options;
    // 加载页面数据
    this.getPageData();
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    // 更新购物车角标
    setCartTabBadge();
  },

  methods: {
    /**
     * 加载页面数据
     * @param {Object} callback
     */
    getPageData(callback) {
      const app = this;
      const pageId = app.options.pageId || 0;
      Api.detail(pageId)
        .then((result) => {
          // 设置页面数据
          const {
            data: { pageData },
          } = result;
          app.page = pageData.page;
          app.items = pageData.items;
          // 设置顶部导航栏栏
          app.setPageBar();
        })
        .finally(() => callback && callback());
    },
    phoneclick() {
      tt.makePhoneCall({
        phoneNumber: "4009673811",
        success: function () {
          // tt.showToast({
          //   title: 'success'
          // });
        },

        fail(err) {
          // tt.showToast({
          //   icon: 'none',
          //   title: err.errMsg
          // });
          console.log(err.errMsg);
        },
      });
    },
    /**
     * 设置顶部导航栏
     */
    setPageBar() {
      const { page } = this;
      // 设置页面标题
      uni.setNavigationBarTitle({
        title: page.params.title,
      });
      // 设置navbar标题、颜色
      uni.setNavigationBarColor({
        frontColor:
          page.style.titleTextColor === "white" ? "#ffffff" : "#000000",
        backgroundColor: page.style.titleBackgroundColor,
      });
    },
  },

  /**
   * 下拉刷新
   */
  onPullDownRefresh() {
    // 获取首页数据
    this.getPageData(() => {
      uni.stopPullDownRefresh();
    });
  },

  /**
   * 分享当前页面
   */
  onShareAppMessage() {
    const app = this;
    const { page } = app;
    return {
      title: page.params.share_title,
      path: "/pages/index/index?" + app.$getShareUrlParams(),
    };
  },

  /**
   * 分享到朋友圈
   * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
   * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
   */
  onShareTimeline() {
    const app = this;
    const { page } = app;
    return {
      title: page.params.share_title,
      path: "/pages/index/index?" + app.$getShareUrlParams(),
    };
  },
  onTargetDetail() {
    let articleId = 1;
    this.$navTo("pages/article/detail", { articleId });
  },
};
</script>

<style lang="scss" scoped>
.container {
  background: #fff;
}
.my-logout1 {
  display: flex;
  justify-content: center;
  margin-top: 50rpx;

  .logout-btn {
    width: 60%;
    margin: 0 auto;
    font-size: 28rpx;
    color: #616161;
    padding: 16rpx 0;
    text-align: center;
  }
}

.movable-area1 {
  // 保持在右下角
  margin-top: 300rpx;
  margin-left: 100rpx;
  height: calc(100vh - 400rpx);
  width: calc(100vw - 150rpx);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  z-index: 99999999;
  pointer-events: none; //此处要加，鼠标事件可以渗透
  .movable-view {
    width: 100rpx;
    height: 100rpx;
    pointer-events: auto; //恢复鼠标事件
    .newProblem {
      width: 100rpx;
      height: 100rpx;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      background: #ffffff;
      border-radius: 50%;
      border: 1px solid #a6a6a6;
      image {
        width: 30rpx;
        height: 30rpx;
      }

      text {
        margin-top: 10rpx;
        font-size: 20rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #000000;
      }
    }
  }
}
</style>
